<template>
    <div class="search-panel">
        <!-- 搜索框 -->
        <van-search v-model="value" show-action shape="round" placeholder="搜索广州的景点、地标、房源" @cancel="onCancel"
            @search="onSearch" />

        <div class="search-result-panel">
            <template v-for="(item, index) in searchsuggest">
                <search-result-item />
            </template>
        </div>
    </div>
</template>


<script setup>
import useSearchStore from '@/stores/modules/search';
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { debounce } from 'lodash'
import { watch } from 'vue';

import searchResultItem from '../search-result-item/search-result-item.vue'

const props = defineProps({
    searchPanelDatas: {
        type: Array,
        default: () => [],
    },
})

const value = ref("");

const searchStore = useSearchStore()
// 监听搜索的内容
watch(value, debounce((newValue) => {
    searchStore.fetchKeywordsearchsuggest(newValue)
}, 500))
const { searchsuggest } = storeToRefs(searchStore)

// 传递数据给父组件
const emit = defineEmits(['search, cancel'])
const onCancel = () => {
    emit('cancel')
}
const onSearch = (val) => {
    emit('search', val)
}

</script>


<style lang="less" scoped>
:global(.search-panel .van-search--show-action) {
    padding-left: 0px;
}

.search-panel :deep(.van-search) {
    .van-field__left-icon .van-icon-search {
        font-size: 25px;
    }

    .van-field__control::placeholder {
        font-size: 13px;
        color: #ccc !important;
    }
}

.search-panel {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 20px;
    background-color: #fff;
}
</style>